<template>
  <div @click="onToggle">
    <SvgIcon
      id="guide-full"
      :icon="isFullScreen ? 'exit-fullscreen' : 'fullscreen'"
    ></SvgIcon>
  </div>
</template>
<script setup>
import SvgIcon from '@/components/SvgIcon/index.vue'
import { ref, onMounted, onUnmounted } from 'vue'
import screenfull from 'screenfull'
const isFullScreen = ref(false)
const onToggle = () => {
  screenfull.toggle()
}
onMounted(() => {
  screenfull.on('change', () => {
    isFullScreen.value = screenfull.isFullscreen
  })
})
onUnmounted(() => {
  screenfull.off('change')
})
</script>
